<template>
	<view>
		<view class="cu-bar bg-red search">
			<!-- <view class="cu-avatar round" :style="{backgroundImage:'url('+imgurl+')'}" @click="gocenter"></view> -->
			
			<image :src="$store.state.user.img" mode="" class="cu-avatar round"  @click="gocenter"></image>
			<!-- 	<view class="cu-avatar round" style='background-image:url(blob:http://localhost:8080/540d9f87-17cb-4522-a50f-78bbb7411038);'></view> -->
			<!-- <img :src="$store.state.img" alt=""> -->

			<view class="search-form radius" @click="showli">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text"
					placeholder="搜索图片、文章、视频" confirm-type="search" v-model="value"></input>

				<ul class="list" v-if="show">
					<li v-for="(item,index) in datalist" :key="index" @click='goDetail(item.id)'>{{item.name}}</li>
				</ul>

			</view>




			<view class="action">
				<view class="" @click="handlegocity">
					<text>{{city?city:'福建'}}</text>
					<text class="cuIcon-locationfill"></text>
				</view>
				<u-line direction="col" length="100upx" color="gray" margin="0 20upx"></u-line>
				<text class="cuIcon-sort" @click="showMask"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				InputBottom: 0,
				// imgurl: null,
				show: false,
				goodlist: [],
				value: "",

			};
		},
		computed: {
			datalist() {
				return this.goodlist.filter(item => item.name.includes(this.value))
			},
			city() {
				return this.$store.state.address.city
			}
		},
		methods: {
			showli() {
				this.show = true
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`,
				})
			},
			InputFocus(e) {

				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				setTimeout(() => {
					this.show = false
				}, 1)

				this.InputBottom = 0
			},
			showMask() {
				this.$emit("showmask", 11)
			},
			gocenter() {
				uni.navigateTo({
					url: '/pages/my/my'
				})
			},
			handlegocity() {
				uni.navigateTo({
					url: '/pages/city/city'
				})
			}




		},
		mounted() {
			this.$get('/1.1/classes/goods').then(res => {
				console.log(res)
				this.goodlist = res.results
			})
			// console.log(1);
			// console.log(this.$store.state);
			// this.imgurl = this.$store.state.user.img
			
		
		},
		
	}
</script>

<style lang="scss">
	ul {
		margin: 0;
		padding: 0;
	}

	li {
		list-style: none;
	}

	.search {
		
		// height: 200upx;
		// padding-top: 50upx;
		padding-top:  var(--status-bar-height);
		padding-bottom: env(safe-area-inset-top);
		// line-height: 150upx;
		
	}

	.search-form {
		position: relative;

		.list {
			position: absolute;
			top: 80upx;
			left: 0upx;
			width: 100%;
			height: 840upx;
			background-color: white;
			overflow: hidden;
		}
	}





	.box {
		margin: 20upx 0;
	}

	.box view.cu-bar {
		margin-top: 20upx;
	}

	.cu-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
</style>
